<template>
  <div>
    <!-- 提示条区域 -->
    <!-- <el-alert title="添加商品信息" type="info" center show-icon :closable="false"></el-alert> -->
    <!-- 步骤条区域 -->
    <!-- <el-steps :active="activeName-0" finish-status="success" align-center>
      <el-step title="基本信息"></el-step>
      <el-step title="规格参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>-->

    <!-- tab 栏区域 -->
    <el-form :model="addForm" label-position="left" label-width="100px" ref="addFormRef">
      <el-form-item label="商品名称" prop="goods_name">
        <el-input v-model="addForm.goods_name" style="width:30%"></el-input>
      </el-form-item>
      <!-- <el-form-item label="商品价格" prop="goods_price">
            <el-input v-model="addForm.goods_price" type="number" min="0"></el-input>
      </el-form-item>-->
      <!-- <el-form-item label="商品CY价格" prop="goods_cy_price">
            <el-input v-model="addForm.goods_cy_price" type="number" min="0"></el-input>
      </el-form-item>-->
      <!-- <el-form-item label="商品重量" prop="goods_weight">
            <el-input v-model="addForm.goods_weight" type="number" min="0"></el-input>
      </el-form-item>-->
      <!-- <el-form-item label="商品库存" prop="goods_number">
            <el-input v-model="addForm.goods_number" type="number" min="0"></el-input>
      </el-form-item>-->
      <!-- <el-form-item label="VIP尊享价格" prop="vipMoney" v-if="radio == 1 ? true : false">
            <el-input v-model="addForm.vipMoney" type="number" min="0"></el-input>
      </el-form-item>-->

      <el-form-item label="商品分类">
        <el-cascader
          v-model="selectType"
          :options="options"
          @change="handleChange"
           clearable
        ></el-cascader>
        <!-- <div style="margin-right:8rem;">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              {{title}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :command="i"
                v-for="(item,i) in productTypeList"
                :key="i"
              >{{item.name}}</el-dropdown-item>
              
            </el-dropdown-menu>
          </el-dropdown>
        </div> -->
      </el-form-item>
      <el-form-item label="服务保证" style="margin-bottom:10px;">
        <el-checkbox-group v-model="selectServiceList" @change="selelctService">
          <el-checkbox :label="1">无忧退货</el-checkbox>
          <el-checkbox :label="2">保证正品</el-checkbox>
          <el-checkbox :label="3">免费包邮</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="商品轮播图" style="margin-bottom:10px;">
        <el-upload
          :data="params"
          :action="form.Url"
          list-type="picture-card"
          :on-preview="handlePictureCardPreviewNew"
          :on-remove="handleRemoveNew"
          :multiple="true"
          :before-upload="beforeUploadNew"
          :on-success="uploadSuccessNew"
          :file-list="fileList3"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品主图" style="margin-bottom:10px;">
        <el-upload
          class="avatar-uploader"
          :data="params"
          :action="form.Url"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="addForm.picture" :src="addForm.picture" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品详情图" style="margin-bottom:10px;">
        <el-upload
          :data="params"
          :action="form.Url"
          list-type="picture-card"
          :on-preview="handlePictureCardPreviewNew"
          :on-remove="delhandleRemoveNew"
          :multiple="true"
          :before-upload="delbeforeUploadNew"
          :on-success="deluploadSuccessNew"
          :file-list="fileList2"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-button type="primary" style="margin-bottom:30px;" @click="confirmGuiGe">添加商品规格</el-button>
      <div style="display:flex;align-item:center;justify-content:center;margin-top:1rem;">
        <el-button
          type="primary"
          @click="addGoods"
          style="margin-top:1rem;display:flex;align-item:center;justify-content:center;box-sizing:border-box;margin:0;"
        >确认修改</el-button>
      </div>
      <el-dialog :visible.sync="dialogVisible" title="添加规格" width="70%">
        <specsgoods :qiniuForm="form" ref="ch"></specsgoods>
        <!-- :ruledata="ruledata"-->

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmGuiGeData">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog :visible.sync="dialogVisiblePrient">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
      <!-- <div style="display:flex;align-items:center;">
            
            <div
              style="display:flex;align-items:center;justify-content:space-between;padding-right:3rem;box-sizing:border-box;"
            >
              <div style="display:flex;align-items:center;margin-right:10rem;">
                <div style="font-size:14px;color:#606266;width:10rem;">是否为vip尊享</div>
                <div style="display:flex;">
                  <el-radio v-model="radio" label="1" style="margin-right:1rem;">是</el-radio>
                  <el-radio v-model="radio" label="2">否</el-radio>
                </div>
              </div>
              <div style="display:flex;align-items:center;">
                <div style="font-size:14px;color:#606266;width:10rem;">商品状态</div>
                <div style="display:flex;">
                  <el-radio v-model="productStatus" label="1" style="margin-right:1rem;">正常</el-radio>
                  <el-radio v-model="productStatus" label="2">下架</el-radio>
                </div>
              </div>
            </div>
          </div>
          <div
            style="display:flex;align-items:center;justify-content:space-between;margin-top:1rem;padding-right:3rem;box-sizing:border-box;"
          >
            <div style="display:flex;align-items:center;">
              <div style="font-size:14px;color:#606266;width:10rem;">商品权重</div>
              <div style="display:flex;align-items:center;box-sizing:border-box;">
                <el-slider v-model="quanzhongValue" :max="1000000" style="width:20rem;"></el-slider>
                <input
                  type="number"
                  v-model="quanzhongValue"
                  style="border:1px solid #DCDFE6;border-radius:3px;width:5rem;margin-left:4px;text-align:center;"
                />
              </div>

            </div>

            <div style="display:flex;align-item:center;">
              <div style="font-size:14px;color:#606266;width:10rem;">是否为今日特价商品</div>
              <div style="display:flex;">
                <el-radio v-model="productTj" label="1" style="margin-right:1rem;">是</el-radio>
                <el-radio v-model="productTj" label="2">否</el-radio>
              </div>
            </div>
      </div>-->
      <div></div>

      <!-- <el-upload
            style="display:flex;align-item:center; flex-direction: column;margin-top:1rem;"
            class="upload-demo"
            :data="params"
            :action="form.Url"
            :headers="dTuploadHeader"
            :on-preview="dThandlePreview"
            :on-remove="dThandleRemove"
            :before-upload="dTbeforeUpload"
            :on-success="dTuploadSuccess"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传商品主图</el-button>
          </el-upload>
          <el-upload
            style="display:flex;align-item:center;flex-direction: column;margin-top:1rem;"
            class="upload-demo"
            :data="params"
            :action="form.Url"
            :headers="uploadHeader"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :multiple="true"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess"
            list-type="picture"
            limit="1"
          >
            <el-button size="small" type="primary">点击上传轮播图</el-button>
          </el-upload>

          <el-upload
            style="display:flex;align-item:center;flex-direction: column;margin-top:1rem;"
            class="upload-demo"
            :data="params"
            :action="form.Url"
            :headers="uploadHeader"
            :on-preview="handlePreviewDetails"
            :on-remove="handleRemoveDetails"
            :multiple="true"
            :before-upload="beforeUploadDetails"
            :on-success="uploadSuccessDetails"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传商品详情图</el-button>
      </el-upload>-->

      <!-- <el-form ref="ruleForm" class="demo-ruleForm">
            <el-form-item label="商品规格：" required>
              <el-button @click="addNature" :disabled="!editType" type="primary">增加属性</el-button>
              <el-button @click="addSku" type="primary">增加SKU</el-button>
              <el-button @click="logData" type="primary">打印tableData数据</el-button>
            </el-form-item>
            <el-form-item>
              <el-table :data="tableData" style="width: 100%">

                <el-table-column v-for="(col,i ) in attr_names" :prop="col.prop" :key="i">
                  <template slot="header" slot-scope="scope">
                    <span class="del" v-on:click="delColumn(scope.$index)" v-if="editType">X</span>
                    <el-input v-model="col.label" size="mini" class="f-cent" :disabled="!editType" />
                  </template>
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row[col.prop]"
                      :disabled="!scope.row['editable']"
                    ></el-input>
                  </template>
                </el-table-column>


                <el-table-column prop="cost_price" label="成本">
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row['cost_price']"
                      :disabled="!scope.row['editable']"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="售价">
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row['price']"
                      :disabled="!scope.row['editable']"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="quantity" label="库存">
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row['quantity']"
                      :disabled="!scope.row['editable']"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="no" label="描述">
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row['no']"
                      :disabled="!scope.row['editable']"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button
                      @click.native.prevent="deleteRow(scope.$index, tableData)"
                      type="text"
                      size="small"
                      v-if="scope.row['editable']"
                    >移除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
      </el-form>-->
      <!-- <el-form-item label="商品分类" prop="goods_cat">
            <el-cascader
              expand-trigger="hover"
              :options="catelist"
              v-model="addForm.goods_cat"
              :props="cascaderProps"
              @change="handleCateChanged"
            ></el-cascader>
      </el-form-item>-->

      <!-- <el-tabs tab-position="left" v-model="activeName" :before-leave="beforeTabLeave">
        
        <el-tab-pane label="基本信息" name="0">
          
        </el-tab-pane>

        <el-tab-pane label="规格参数" name="4">
          <el-button type="primary" style="margin-bottom:30px;" @click="confirmGuiGe">添加商品规格</el-button>
          <el-dialog :visible.sync="dialogVisible" title="添加规格" width="60%">
            <specsgoods :qiniuForm="form" ref="ch"></specsgoods>
           

            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="confirmGuiGeData">确 定</el-button>
            </span>
          </el-dialog>

         

          <div style="display:flex;align-item:center;justify-content:center;margin-top:1rem;">
            <el-button
              type="primary"
              @click="addGoods"
              style="margin-top:1rem;display:flex;align-item:center;justify-content:center;box-sizing:border-box;margin:0;"
            >添加商品</el-button>
          </div>

         
        </el-tab-pane>
      </el-tabs>-->
    </el-form>

    <!-- 图片预览窗口 -->
    <el-dialog title="图片预览" :visible.sync="previewDialogVisible" width="50%">
      <img :src="previewURL" alt style="width: 100%;" />
    </el-dialog>
  </div>
</template>

<script>
import mix from "./edit-mixins.js";
export default {
  mixins: [mix],
  checkedVip: false,
};
</script>

<style lang="less" scoped>
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.del {
  cursor: pointer;
  display: none;
  background: red;
  color: #fff;
  font-size: 10px;
  padding: 2px 5px;
  position: absolute;
  top: 7px;
  right: 0px;
  z-index: 9;
  border-radius: 3px;
}
.cell:hover .del {
  display: inline;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>
